<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>后台</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" href="../../../../static/layui/css/layui.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="/admin/share/_header :: header"></div>

    <!-- 左侧导航区域 -->
    <div th:replace="/admin/sys_mgmt/share/_left_sidebar :: leftSidebar('user')"></div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div id="testTabs" class="layui-tab">
                <ul class="layui-tab-title">
                    <li>用户管理</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                            <div class="btn-group mr-2" role="group" aria-label="Second group">
                                <button type="button" class="btn btn-secondary" onclick="checkUserRoles();">
                                    <!-- 选中的资源都属于那些权限 -->
                                    <i class="layui-icon">&#xe705;</i> 查看用户对应的角色
                                </button>
                            </div>
                        </div>

                        <table class="layui-table" id="userTable" lay-filter="userTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户对应角色 -->
    <div class="modal fade" id="userRoleModal" tabindex="-1" role="dialog" aria-labelledby="userRoleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document" style="max-width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userRoleModalLabel">用户角色</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="userRoleContent"></div>
            </div>
        </div>
    </div>

    <!-- 
		th:insert  ：保留自己的主标签，保留th:fragment的主标签。
		th:replace ：不要自己的主标签，保留th:fragment的主标签。
		th:include ：保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）
	 -->
    <div th:replace="/admin/share/_footer :: footer"></div>
</div>

<script type="text/html" id="userOps">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<script th:src="@{/layui/layui.js}" src="../../../../static/layui/layui.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
        crossorigin="anonymous"></script>

<script type="text/javascript">
    //JavaScript代码区域
    layui.use(['table', 'element', 'layer'], function () {
        var element = layui.element
            , layer = layui.layer //弹层
            , table = layui.table; //表格;

        table.render({
            elem: '#userTable',
            height: 400,
            url: '/admin/users/all',
            request: {
                pageName: 'page',
                limitName: 'size'
            },
            response: {
                dataName: 'rows',
                countName: 'totalCount'
            },
            page: true,
            cols: [
                [
                    {type: 'numbers', fixed: true},
                    {type: 'checkbox', fixed: true},
                    {field: 'username', width: 100, title: '用户名'},
                    {field: 'phone', width: 150, title: '手机号'},
                    {field: 'email', width: 200, title: '邮箱'},
                    {fixed: 'right', align: 'center', toolbar: '#userOps'}
                ]
            ]
        });

        //监听工具条
        table.on('tool(userTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                layer.msg('编辑操作');
            }
        });
    });

    // 查看用户对应的角色
    var selectedUser;

    function checkUserRoles() {
        var checkStatus = layui.table.checkStatus('userTable');
        console.log(checkStatus.data) //获取选中行的数据
        if (checkStatus.data.length > 1) {
            layui.layer.msg("只能选择一个用户查看");
            return;
        }
        selectedUser = checkStatus.data[0];
        $('#userRoleModal').modal('show');
        $.ajax("/admin/users/" + checkStatus.data[0].id + "/roles", {
            type: 'GET',
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layui.layer.msg("出错了");
            },
            success: function (data, textStatus, jqXHR) {
                $('#userRoleContent').html(data);
            }
        });
    }

    // 为modal添加hide 监听
    $('#userRoleModal').on('hide.bs.modal', function (event) {
        $('#userRoleContent').html("");
    });
</script>
</body>
</html>